<template>
  <div class="center">
    <el-row :gutter="20">
      <el-col :span="3"><div class="centerTitle">危机管理</div></el-col>
      <!-- <el-col :span="3" :offset="20" :xl="{span: 2, offset: 20}">
        <el-button type="primary" size="medium">添加危机</el-button>
      </el-col> -->
    </el-row>
    <el-row :gutter="24" class="centerTable">
      <el-table border :data="tableData" :menuList="this.menuList" :class="tableConfig.class" :style="tableConfig.style" v-loading="tableConfig.loading" @selection-change="handleSelectionChange">
        <!-- 多选按钮 -->
        <template v-if="tableConfig.checkout==true">
          <el-table-column type="selection" align="center" :selectable="selectable"></el-table-column>
        </template>
        <template v-for="(item, index) in tableConfig.config">
          <!-- 操作 -->
          <template v-if="item.prop === 'operation'">
            <el-table-column :key="item.prop" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width" :fixed="item.fixed">
              <template slot-scope="scope">
                <template v-if="scope.$index !==0">
                  <el-button v-if="scope.row.type_title === '' && menuList.includes('modifyInformation')" @click="examine(scope.row, 'supplement', scope.$index)" type="text" size="small">补充信息</el-button>
                  <el-button v-if="scope.row.type_title !== '' && menuList.includes('crisisManage')" @click="examine(scope.row, 'management', scope.$index)" type="text" size="small">危机管理</el-button>
                </template>
                <template v-else>
                  <el-button type="primary" round size="mini" @click="examine(scope.row, 'query', scope.$index)">查询</el-button>
                  <el-button type="text" @click="examine(scope.row, 'del', scope.$index)">清除</el-button>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 状态 -->
          <template v-else-if="item.prop === 'status'">
            <el-table-column :key="item.id" :prop="item.prop" :label="item.label" :align="tableConfig.align?tableConfig.align:'center'" :width="item.width">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </div>
                <template v-else>
                  <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" active-color="#49abf8" inactive-color="#ec5529" @change="changeSwitch(scope.row)"/>
                </template>
              </template>
            </el-table-column>
          </template>
          <!-- 内容 -->
          <template v-else>
            <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width" :align="item.align" :formatter="item.formatter">
              <template slot-scope="scope">
                <div v-if="scope.$index === 0">
                  <el-input v-model="item.modelValue" placeholder="请输入内容" v-if="scope.row[item.prop] === 'input'"></el-input>
                  <el-select v-model="item.modelValue" placeholder="请选择" v-if="scope.row[item.prop] === 'select'">
                    <el-option v-for="item in item.optionsList" :key="item.id" :label="item.title" :value="item.id"></el-option>
                  </el-select>
                </div>
                <div v-else >{{scope.row[item.prop]}}</div>
              </template>
            </el-table-column>
          </template>
        </template>
      </el-table>
    </el-row>
    <el-row :gutter="24" class="fr">
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
    </el-row>
  </div>
</template>
<script>
import {APIALLLEARNINGPERIOD, APIALLLGRADE, APIALLCLASS, APICRISISGETLIST, APICRISISGETSUNDRY} from '@/common/api.js'
export default {
  data () {
    return {
      menuList: [],
      form: {},
      configRow: ['input', 'select', 'select', 'select', 'select', 'select', 'select', 'select', 'select', ''], // 配置的就是input、select 没有就是空
      configRowList: {
        real_name: '',
        sex_title: '',
        section_title: '',
        grade_title: '',
        class_title: '',
        type_title: '',
        influence_range_title: '',
        mode_title: '',
        status_title: ''
      },
      tableData: [],
      tableConfig: {
        loading: false,
        class: 'table-list', // 表格的class名
        style: 'width:100%',
        checkout: true, // 控制是否有多选框
        index: true, // 是否有序号
        config: [
          {
            label: '姓名',
            prop: 'real_name',
            align: 'center',
            modelValue: '',
            width: '200'
          },
          {
            label: '性别',
            prop: 'sex_title',
            align: 'center',
            modelValue: '',
            optionsList: [{
              title: '男',
              id: 1
            }, {
              title: '女',
              id: 2
            }]
          },
          {
            label: '学段',
            prop: 'section_title',
            align: 'center',
            width: '100',
            modelValue: '',
            optionsList: []
          },
          {
            label: '年级',
            prop: 'grade_title',
            align: 'center',
            width: '200',
            modelValue: '',
            optionsList: []
          },
          {
            label: '班级',
            prop: 'class_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '危机类型',
            prop: 'type_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '影响范围',
            prop: 'influence_range_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '预警方式',
            prop: 'mode_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '状态',
            prop: 'status_title',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            label: '危机次数',
            prop: 'number',
            align: 'center',
            modelValue: '',
            optionsList: []
          },
          {
            prop: 'operation',
            label: '操作',
            fixed: 'right',
            width: '200',
            list: []
          }
        ]
      },
      currentPage: 1,
      total: 0,
      page: 1,
      checkStr: '',
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.tableList()
    this.selectFn()
  },
  methods: {
    selectable (row, index) {
      if (index !== 0) {
        return true
      } else {
        return false
      }
    },
    InIt () { // 初始化
      this.tableData = []
      const arrs = Object.keys(this.configRowList)
      const obj = {}
      arrs.map((item, index) => {
        obj[item] = this.configRow[index]
      })
      this.tableData.unshift(obj)
    },
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APICRISISGETLIST(this.form).then((res) => {
        if (res.status === 1) {
          this.InIt()
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          res.data.list.forEach(item => {
            this.tableData.push(item)
          })
        } else {
          this.$message.error(res.msg)
          this.InIt()
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    selectFn () {
      APIALLLEARNINGPERIOD().then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '学段') {
            element.optionsList = res.data
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
      APICRISISGETSUNDRY().then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '危机类型') {
            element.optionsList = res.data.crisis_list
          }
          if (element.label === '影响范围') {
            element.optionsList = res.data.influence_scope_list
          }
          if (element.label === '预警方式') {
            element.optionsList = res.data.mode_list
          }
          if (element.label === '状态') {
            element.optionsList = res.data.status_list
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    examine (rows, id, index) {
      this.goToOperation({id: id, rows: rows, index: index})
    },
    handleSelectionChange (val) {
      this.goToDeleteSelect(val)
    },
    changeSwitch (row) {
      this.$emit('changeSwitch', row)
    },
    goToDeleteSelect (val) { // 多选
      let arr = []
      val.forEach(item => {
        arr.push(item.uid)
      })
      this.checkStr = arr.toString()
    },
    goToOperation (val) { // 按钮
      if (val.id === 'query') { // 搜素
        this.dataProcessing()
      } else if (val.id === 'del') { // 清除
        this.form = []
        this.tableConfig.config.forEach(element => {
          element.modelValue = ''
        })
        this.tableList()
      } else if (val.id === 'supplement') { // 查看详情
        this.$router.push({path: '/supplement', query: {id: val.rows.id, name: val.rows.real_name, uid: val.rows.uid}})
      } else if (val.id === 'management') { // 危机管理
        this.$router.push({path: '/studentCrisis', query: {id: val.rows.id}})
      }
    },
    dataProcessing () { // 整理
      this.tableConfig.config.forEach(element => {
        if (element.label === '姓名') {
          this.form.real_name = element.modelValue
        }
        if (element.label === '性别') {
          this.form.sex = element.modelValue
        }
        if (element.label === '学段') {
          this.form.section_title = element.modelValue
        }
        if (element.label === '年级') {
          this.form.grade_title = element.modelValue
        }
        if (element.label === '班级') {
          this.form.class_title = element.modelValue
        }
        if (element.label === '危机类型') {
          this.form.type = element.modelValue
        }
        if (element.label === '影响范围') {
          this.form.influence_range = element.modelValue
        }
        if (element.label === '预警方式') {
          this.form.mode = element.modelValue
        }
        if (element.label === '状态') {
          this.form.status = element.modelValue
        }
      })
      this.tableList()
    }
  },
  computed: {
    newGrade () {
      let grade
      this.tableConfig.config.forEach(element => {
        if (element.label === '学段') {
          grade = element.modelValue
        }
      })
      return grade
    },
    newClass () {
      let newClass
      this.tableConfig.config.forEach(element => {
        if (element.label === '年级') {
          newClass = element.modelValue
        }
      })
      return newClass
    }
  },
  watch: {
    newGrade (newV, oldV) {
      APIALLLGRADE({
        section_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '年级') {
            element.optionsList = res.data
          }
          if (element.label === '年级') {
            element.modelValue = ''
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    newClass (newV, oldV) {
      APIALLCLASS({
        grade_id: newV
      }).then((res) => {
        this.tableConfig.config.forEach(element => {
          if (element.label === '班级') {
            element.optionsList = res.data
          }
          if (element.label === '班级') {
            element.modelValue = ''
          }
        })
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
